<template>
	<view>
		
		<template v-if="searchList.length === 0">
			<!-- 搜索历史 start -->
			<view class="king-padding-y-20 king-font-md king-padding-x-20">搜索历史</view>
		
			<!-- 搜索列表 start -->
			<view class="king-flex king-flex-wrap">
				<view class="king-border king-rounded-circle-8 king-font king-margin-x-20 king-margin-y-10 king-padding-x-20 king-padding-y-10" v-for="(history, historyIndex) in historyList" :key="historyIndex" hover-class="king-bg-light" @tap="clickSearchHistory(history)">
				{{history}}
				</view>
			</view>
			<!-- 搜索列表 end -->
			
			<!-- 搜索历史 end -->
		</template>
		<template v-else>
			<!-- 数据列表 start -->
			<block v-for="(searchItem, searchIndex) in searchList" :key="searchIndex">
				<common-list :item="searchItem" :index="searchIndex"></common-list>
			</block>
			<!-- 数据列表 end -->
		</template>
		
	</view>
</template>

<script>
	// 虚拟数据
	const demoData = [
		{
			nickName: "小柒君",
			avatar: "/static/demo/userpic/12.jpg",
			addTime: "2021-04-06 下午09:48",
			isFollow: false,
			content: "来呀！快活呀！反正有大把时光！",
			pictures: "/static/demo/datapic/zp.png",
			support: {
				status: true,
				total: 987
			},
			commentTotal: 576
		},
		{
			nickName: "Gally",
			avatar: "/static/demo/userpic/10.jpg",
			addTime: "2021-04-05 上午11:25",
			isFollow: true,
			content: "你好，夏天！",
			pictures: "/static/demo/datapic/hello.png",
			support: {
				status: false,
				total: 0
			},
			commentTotal: 0
		},
		{
			nickName: "简妮丝",
			avatar: "/static/demo/userpic/19.jpg",
			addTime: "2021-04-03 下午02:12",
			isFollow: false,
			content: "说走就走！",
			pictures: "/static/demo/datapic/15.jpg",
			support: {
				status: true,
				total: 283
			},
			commentTotal: 13
		},
		{
			nickName: "Nicholas",
			avatar: "/static/demo/userpic/7.jpg",
			addTime: "2021-04-02 上午08：29",
			isFollow: false,
			content: "你说再美的烟火，灿烂也只是瞬间，转眼消失不见！",
			pictures: "/static/demo/datapic/14.jpg",
			support: {
				status: false,
				total: 829
			},
			commentTotal: 1980
		},
		{
			nickName: "雅漾",
			avatar: "/static/demo/userpic/4.jpg",
			addTime: "2021-04-01 上午07：38",
			isFollow: false,
			content: "人生总是在路上！",
			pictures: "/static/demo/datapic/28.jpg",
			support: {
				status: true,
				total: 23
			},
			commentTotal: 3
		}
	];
	
	import commonList from "@/components/common/common-list.vue";  // 引入公共列表组件
	export default {
		components:{
			commonList,
		},
		
		data() {
			return {
				searchText: "", // 搜索文字，用于输入框动态绑定
				
				// 搜索历史列表
				historyList: [
					'测试1',
					'测试2',
					'测试3',
					'测试4',
					'测试5',
					'测试6'
				],
				
				// 搜索结果列表
				searchList: []
			}
		},
		
		// 监听导航输入，搜索框动态显示用户输入
		onNavigationBarSearchInputChanged(e) {
			this.searchText = e.text;
		},
		
		// 监听导航栏按钮点击事件（点击搜索按钮）
		onNavigationBarButtonTap(e) {
			if ( 0 === e.index ) {
				this.search();
			}
		},
		
		methods: {
			// 点击搜索历史快速搜索
			clickSearchHistory(text) {
				this.searchText = text;
				this.search();
			},
			
			// 搜索
			search() {
				// 收起键盘
				uni.hideKeyboard();
				
				// 显示 loading 状态
				uni.showLoading({
					title: '加载中...',
					mask: false
				});
				
				// 请求搜索
				setTimeout(()=>{
					this.searchList = demoData;
					// 隐藏 loading
					uni.hideLoading();
				}, 3000)
			},
		}
	}
</script>

<style>

</style>
